<template>
  <el-dialog
    :title="dialogTitle"
    :visible="dialogVisible"
    @close="dialogCancle"
    :close-on-click-modal="false"
    width="35vw"
    :modal-append-to-body="false"
    :append-to-body="true"
    top="25vh"
    v-dialogDrag
  >
    <el-form
      ref="userInfo"
      size="small"
      :model="userInfo"
      :rules="rules"
      label-width="100px"
      class="sys-dialog-style"
    >
      <el-form-item prop="loginPhone" label="手机号：">
        <el-input
          type="number"
          v-model="userInfo.loginPhone"
          placeholder="输入手机号(登录账号)"
          :maxlength="11"
          class="user-dialog-input"
        ></el-input>
      </el-form-item>
      <el-form-item prop="fullName" label="姓名：">
        <el-input
          type="text"
          v-model="userInfo.fullName"
          placeholder="输入姓名"
          maxlength="24"
          class="user-dialog-input"
        ></el-input>
      </el-form-item>
      <el-form-item prop="loginPassword" label="密码：">
        <el-input
          type="text"
          v-model="userInfo.loginPassword"
          placeholder="输入密码"
          maxlength="24"
          class="user-dialog-input"
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogCancle" size="small">取 消</el-button>
      <el-button type="primary" @click="checkedSubmit" size="small" :loading="loadingFlg">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>

import { addUserType } from '@/api/funeralparlour/funeralparlour.js'

export default {
  name: "userRecordAddDialog",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },

  watch: {
    dialogVisible() {
      this.visible = this.dialogVisible;

      if (!this.visible)
        return;
    }
  },
  data() {
   

    return {
      //是否加载
      loadingFlg: false,
      visible: false,
      parksOptions: [],
      userInfo: {},
      rules: {
        loginPhone: [
          {
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          },
          {
            pattern: /^1[3|4|5|7|8][0-9]\d{8}$/,
            message: '手机号格式不对',
            trigger: 'blur'
          },
        ],
        fullName: [
          {
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          },
          {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
        ],
        loginPassword: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          },
          {min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur'}
        ]
      }
    };
  },
  computed: {
    dialogTitle() {
      return "新增app用户";
    }
  },
  methods: {
    //提交Point信息
    checkedSubmit() {
      this.$refs.userInfo.validate(valid => {
        if (valid) {
          let message = "确认新增用户吗？";

          this.$confirm(message, "提示", {})
            .then(() => {
              this.loadingFlg = true;
              // 添加类型
              let params = this.userInfo;
              addUserType(params)
                //console.log(params)
                .then(res => {
                  this.loadingFlg = false;
                  this.$message({
                    message: res.message,
                    type: "success"
                  });
                  this.dialogCancle();
                  this.$emit("renovate");
                })
                .catch(res => {
                  this.loadingFlg = false;
                });
            })
            .catch(() => {});
        }
      });
    },
    //关闭弹窗
    dialogCancle() {
      this.visible = false;
      this.$refs.userInfo.resetFields();
      this.$emit("dialogCancle", this.visible);
    },
  }
};
</script>
